<template lang='pug'>
  .page
    .AccountsReceivableManage
      .search-form.mb-10.pl-10.pr-10(v-if="hasFind")
        Form.ivu-row.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="100")
          FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'select'")
              Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.value"
                  :key="index"
                ) {{ c_item.label }}
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
            template(v-if="item.type === 'button'")
              Button(type="info" @click="searchFn") 查询

      .pl-20.pr-20.bg-white
        Table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable" @on-selection-change="handleOnSelectChange")
          .clearfix.font-16(slot="header")
            .table-title-lefttxt.pull-left
              |合计
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
              |条
            .pull-right.table-title-btns
              Button.mr-10(v-if="hasConfirm" type="info" :disabled="!selectedId.length" @click="isSureModal()") 确认入职
              Button(v-if="hasExport" type="info" @click="handleExport") 导出
          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
          template(slot-scope="{ row, index }" slot="action")
            Button.mr-10(v-if="hasConfirm" type="text" size="small" @click="isSureModal(row)") 确认入职
            Button.mr-10(v-if="hasView"  type="text" size="small" @click="goEmployeeCreate(row.id, row.companyId, row.companyName, row.typeValue, true)") 详情

            //- Button.mr-10(v-if="hasView" type="text" size="small" @click="goEmployeeCreate(row.id, row.companyId, row.companyName, 0, true)") 详情(新需求)
</template>

<script>
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')
import { EmployeeQuickEntryApi } from '@/api/EmployeeQuickEntry.api.js'
import { waitInductionThead } from './tableHead.js'
import _cloneDeep from 'clone-deep'
const colStyle = 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-9 ivu-col-span-xxl-6'
export default {
  name: 'waitInduction',

  components: {
  },

  data () {
    return {
      thead: _cloneDeep(waitInductionThead),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
      formData: {
        name: '',
        idCardNo: '',
        companyName: '',
      },
      formItem: [
        { type: 'input', label: '姓名：', placeholder: '请输入姓名', prop: 'name', model: 'name', style: colStyle },
        { type: 'input', label: '身份证号码：', placeholder: '请输入身份证号码', prop: 'idCardNo', model: 'idCardNo', style: colStyle },
        // { type: 'input', label: '公司名称：', placeholder: '请输入公司名称', prop: 'companyName', model: 'companyName', style: colStyle },
        { type: 'button', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-3 ivu-col-span-xxl-3' }
      ],
      rules: {},
      arrListDown: {
        AuditStatus: []
      }
    }
  },

  mounted () {
    this.query()
  },

  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },

    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },

    // 查看
    hasView () {
      return this.actionArr.indexOf('View') > -1
    },

    // 确认入职
    hasConfirm () {
      return this.actionArr.indexOf('Confirm') > -1
    },

    // 导出
    hasExport () {
      return this.actionArr.indexOf('Export') > -1
    },
  },

  methods: {
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    // 分页页码变动
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return { id: item.id, name: item.invoiceItem }
      })
      this.selectedId = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedId)
    },

    // 分页页码变动
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },

    // 获取列表
    query() {
      var params = {
        ...this.formData,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize,
      }
      EmployeeQuickEntryApi.getList(params).then(resp => {
        console.log('%c resp: ', 'color:red', resp)
        if (resp.data.success) {
          this.tableComone.totalRows = resp.data.totalRows
          this.tableData = resp.data.data
        }
      })
    },

    // 是否操作前询问
    isSureModal (row) {
      this.$Modal.confirm({
        title: '是否确认入职',
        onOk: () => {
          this.handleConfirm(row)
        }
      })
    },

    // 确认入职
    handleConfirm (row) {
      EmployeeQuickEntryApi.confirm(row && row.id || this.selectedId.join(',')).then(resp => {
        if (resp.data.success) {
          this.$Message.success({
            content: resp.data.message,
          })
          this.query()
        } else {
          this.$Message.error({
            content: resp.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 导出
    async handleExport () {
      var params = {
        ...this.formData,
      }
      EmployeeQuickEntryApi.export(params).then(res => {
        console.log('导出: ', res)
        if (res.status === 200 && res.data.success) {
          console.log('❤ 返回链接: ', baseUrl + res.data.data)
          window.open(baseUrl + res.data.data, '_blank')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 去往员工新增/详情页面
    goEmployeeCreate (employeeId, companyId, companyName, typeValue, isOnlyView) {
      var currentCustomerManage = {
        companyId: companyId,
        typeValue: typeValue
      }
      console.log('🐶🐶🐶 ', currentCustomerManage)
      localStorage.setItem('currentCustomerManage', JSON.stringify(currentCustomerManage))
      console.log('去往员工新增/详情页面时，员工ID是：' + employeeId + '，公司ID是：' + companyId + '，公司名称是：' + companyName + '，公司类型是：' + typeValue)
      // this.getModel(employeeId)
      if (employeeId !== '') {
        this.$router.push({
          path: '/EmployeeCreate',
          name: 'EmployeeCreate',
          query: {
            companyId: companyId,
            companyName: companyName,
            employeeId: employeeId,
            isOnlyView: isOnlyView,
            isFromRoster: true,
            isToBeStaff: true,
            isFromWaitInduction: true
          }
        })
      }
    },

    // 获取详情
    getModel (id) {
      EmployeeQuickEntryApi.getModel(id).then(resp => {
        console.log('%c resp: ', 'color:red', resp)
        if (resp.data.success) {
        }
      })
    },
    
  }
}
</script>

<style lang="less">       
</style>
